<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回调</title>
</head>

<body>
    <!--例3
         <div
        style="width:150px;height:150px;background:green;color:white;font-weight:bold;font-size: 24px;text-align: center;line-height: 150px;">
        哦</div>
    <button id="btn">开始</button> -->
    <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> -->
    <script>
        /* 1.普通的回调   
        function a(fn) {
            console.log(1)
            fn()
            console.log(2)
        }
        a(function () {
            console.log("我是回调1，我被执行了")
            a(function () {
                console.log("我是回调2，我被执行了")
            })
        }) */
        /*
        输出是：1
                我是回调1，我被执行了
                1
                我是回调2，我被执行了
                2
                2
        */
        /*    //2.使用了Promise的回调
           function a() {
               return new Promise(resolve => {
                   console.log(1)
                   resolve()
                   console.log(2)
               })
           }
           console.log("hello1")
           a().then(function () {
                   console.log("我是第一个回调，我被执行了")
                   return a()
               })
               .then(function () {
                   console.log("我是第二个回调，我被执行了")
               })
           console.log("hello2") */
        /*
        输出是：hello1
                1
                2
                hello2
                我是第一个回调，我被执行了
                1
                2
                我是第二个回调，我被执行了
        */
        /*补充2：全局和Promise()是同步的，其他地方是异步的*/
        /*  console.log(1)
         let p = new Promise(resolve => {
             console.log(2)
             resolve()
             console.log(3)
         })
         console.log(4)
         p.then(() => {
             console.log(5)
         })
         console.log(6) */
        /*
        输出是：123465
        */
        /* 3.Promise回调移动小方块
        function moveTo(el, x, y) {
            return new Promise(resolve => {
                el.style.transform = `translate(${x}px,${y}px)`
                setTimeout(() => {
                    resolve()
                }, 500)
            })
        }
        let el = document.querySelector('div')
        let btn = document.getElementById("btn")
        btn.addEventListener('click', (e) => {
            moveTo(el, 100, 100)
                .then(() => {
                    console.log("第一次移动")
                    return moveTo(el, 200, 200)
                }).then(() => {
                    console.log("第二次移动")
                    return moveTo(el, 300, 400)
                }).then(() => {
                    console.log("第三次移动")
                    return moveTo(el, 400, 300)
                }).then(() => {
                    //console.log("第四次移动")
                    console.log("移动结束，回到原位")
                    return moveTo(el, 0, 0)
                })
        }) */
        //补充代码

        /* 4.异步加载图片
        function showpic(url) {

            let img = document.createElement('img');

            img.setAttribute('src', url);

            document.body.appendChild(img);

            return new Promise(resolve => {

                setTimeout(function () {

                    resolve();

                }, 1000);

            });

        }



        showpic('http://climg.mukewang.com/5b16558d00011ed506000338.jpg')

            .then(function () {

                console.log('显示第一张');

                return showpic('http://climg.mukewang.com/5b165603000146ca06000338.jpg ');

            })

            .then(() => {

                console.log('显示第二张');

                return showpic('http://climg.mukewang.com/5b1656140001c89906000338.jpg ');

            })

            .then(() => {


                console.log('显示结束');

            }) */



        /* 5.Promise在不同函数中链式调用
        function cook() {
            console.log('开始做饭。');
            var p = new Promise(function (resolve, reject) {
                setTimeout(function () {
                    console.log('做饭完毕！');
                    resolve('鸡蛋炒饭');
                }, 1000);
            });
            return p;
        }

        function eat(data) {
            console.log('开始吃饭：' + data);
            var p = new Promise(function (resolve, reject) {
                setTimeout(function () {
                    console.log('吃饭完毕!');
                    resolve('一块碗和一双筷子');
                }, 2000);
            });
            return p;
        }

        function wash(data) {
            console.log('开始洗碗：' + data);
            var p = new Promise(function (resolve, reject) {
                setTimeout(function () {
                    console.log('洗碗完毕!');
                    resolve('干净的碗筷');
                }, 2000);
            });
            return p;
        } */
        //补充代码
        /*  cook().then((resolve) => {
             return eat(resolve)
         }).then((resolve) => {
             return wash(resolve)
         }).then((resolve) => {
             console.log(resolve)
         }) */
        /* cook().then(eat).then(wash).then((data) => {
            console.log(data);
        }) */

        /*6.错误处理1 
         function b(val) {
             return new Promise((resolve, reject) => {
                 if (val) {
                     resolve('啦啦啦')
                 } else {
                     reject('404')
                 }
             })
         }
         b(false).then(( /*resolve*/
        /*) => {
                   console.log("成功")
               }, ( /*reject*/
        /* info) => {
                    console.log(info)
                })
                b(true).then(( /*resolve*/
        /*data) => {
                   console.log(data)
               }, ( /*reject*/
        /*) => {
                   console.log("失败")
               }) */

        /*7.错误处理2 
          function b(val) {
              return new Promise((resolve, reject) => {
                  if (val) {
                      resolve('成功！')
                  } else {
                      reject('404')
                  }
              })
          } */
        /*  b(true).then((data) => {
             //只处理正确的
             console.log(data)
             return b(false)
         }).then(() => {
             //只处理正确的
         }).catch(e => {
             console.log(e)
         }) */
        /* b(true).then((data) => {
            //只处理正确的
            console.log(data)
            return b(false)
        }).then(() => {
            //只处理正确的
        }, (e) => {
            //只处理错误的
            console.log("我是reject(),错误是：" + e)
        }).catch(e => {
            //不会被调用
            console.log(e)
        }) */
        /*
        但是但是但是，catch只是捕获了错误，并给出提示，并没有处理错误
        。finally(()=>{})
        */

        /* 8.将同步事件转成异步事件
        function changeSyncToAsync(syncTask) {
            return Promise.resolve(syncTask).then((syncTask) => {
                return syncTask()
            })

        }
        console.log("同步1")
        changeSyncToAsync(() => {
            console.log("异步1")
            return 1 + 1
        }).then(res => {
            console.log("异步的结果是：" + res)
        })
        console.log("同步2") */
        /*
        9.小图床:等图片全加载完成，才显示图片
        */
        /* const loadImg = (src) => {
            return new Promise((resolve, reject) => {
                const img = new Image()
                img.src = src
                img.onload = () => {
                    resolve(img)
                }
                img.onerror = (e) => {
                    reject(e)
                }

            })
        }
        //图片的url地址
        const imgsurl = ['imgs/1.jpg', 'imgs/2.jpg', 'imgs/3.png', 'imgs/img-796d24a860ddcf44a5076854eda5f9fb.jpg', 'a']
        Promise.all(imgsurl.map((src) => loadImg(src))).then((arr) => {
            console.log(arr)
            arr.forEach((img) => {
                document.body.appendChild(img)
            })
        }).catch((e) => {
            console.log(e)
        }) */
    </script>
</body>

</html>